<template>
  <div v-if="isButton" class="flex-center text-18px cursor-pointer">
    <t-button size="large" variant="text" shape="square">
      <template #icon>
        <SunnyIcon :class="props.showColor ? 'c-orange' :''" v-if="!appStore.darkMode"/>
        <MoonIcon v-else/>
      </template>
    </t-button>
  </div>
  <div v-else class="h-full flex-center cursor-pointer">
    <SunnyIcon :class="props.showColor ? 'c-orange' :''" v-if="!appStore.darkMode"/>
    <MoonIcon v-else/>
  </div>
</template>

<script setup lang="ts">
import {SunnyIcon, MoonIcon} from 'tdesign-icons-vue-next'
import {useAppStore} from "@/store/modules/app";

const appStore = useAppStore();

interface Props {
  showColor: boolean;
  isButton: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showColor: false,
  isButton: true
})

</script>

<style lang="scss" scoped>
</style>